<template>
  <div>
    vue3打包后打开页面部分空白如何解决？ 火山少年 于 2022-05-17 14:37:36 发布
    291 收藏 分类专栏： vue3 文章标签： vue.js javascript 版权 vue3
    专栏收录该内容 2 篇文章0 订阅 订阅专栏
    我个人的原因是router的history模式引起的。 做以下几点，问题解决。
    1.修改vue.config.js const { defineConfig } = require('@vue/cli-service')
    //const path = require("path"); //const resolve = function(dir) { // return
    path.join(__dirname, dir); //}; module.exports = defineConfig({ publicPath:
    process.env.NODE_ENV === 'production' ? './' : '/', outputDir: 'dist',
    indexPath: 'index.html', transpileDependencies: true, lintOnSave:false,
    //每次保存都启用eslint /*chainWebpack: config =>
    {//这里修改路径别名，不过对我无效 config.resolve.alias .set("@",
    resolve("src")) .set("@v", resolve("src/views")) .set("@c",
    resolve("src/components")) .set("@u", resolve("src/utils")) .set("@s",
    resolve("src/service")); /!* 别名配置 *!/
    config.optimization.runtimeChunk("single"); },*/ devServer: { port:8000 } })
    2.修改router/index.js import { createWebHistory, createRouter } from
    'vue-router'; const history =
    createWebHistory("/");//这里加了"/"不知道是不是有效果 没测 const
    router=createRouter({ history, routes}) 3.最主要是这步，nginx修改配置
    location / { index index.php index.html error/index.html; try_files $uri
    $uri/ /index.html; } 重启nginx，好了 开发者涨薪指南
    48位大咖的思考法则、工作方式、逻辑体系 火山少年 关注 0 0 0 打赏 专栏目录
    相关推荐 vue项目打包后打开页面空白解决办法 08-27
    主要介绍了vue项目打包后打开空白解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 10-16
    主要介绍了解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    关于vue/cli3打包空白页问题解决_大大的叹号的博客-CSD... 5-7
    在vue-cli2中也出现过打包后本地打开index.html空白页问题,解决办法:修改config文件夹中ndex.js文件中assetsPublicPath属性为assetsPublicPath:
    ‘./’,路由用hash模式 环境 vue-cli3 package.json文件如下: ... ...打包后
    页面空白问题_Voices_的博客_vuecli3打包后空白 5-19 vue-cli3 - vue ui打包后
    页面空白问题 在vue
    ui中由于webpack的配置自动完成所以打包之后,使用的是默认的配置。
    后来阅读文档发现路径的配置被放在了vue.config.js中,所以解决方法是在跟路径新建一个vue.config.js文件,然后加上以下...
    关于Vue3(Vue-cli3)打包以及打包之后显示空白和图片不显示的问题
    weixin_46285310的博客 1530
    今天进行打包之后遇到一个问题就是，打包上传到服务器里面，图片不显示，之后查了一下，最新的vue3里是这么进行配置的
    打包：
    Vue项目创建好之后，右键在新终端中打开，注意一定要在项目的根目录里，输入npm
    run build 进行打包，等打包好之后，类似这样
    左侧项目目录会出现一个dist文件夹，这就是你打包好之后的文件夹
    当然你可以修改它的名称上传到服务器里进行访问，这就是打包
    关于上传到服务器里显示空白和图片不显示怎么去做
    网上大多都是有关于vue2及以下版本的配置，在build文. vue+webpack 打包文件 404
    页面空白的解决方法 11-30
    最近用vue-cli+vue-router+webpack建立项目，其中的遇到的三个问题，整理如下：
    vue-cli+ webpack 建立的项目，cnpm run build
    打包项目之后，需要放在http服务器上才可以运行， 例如 ：nginx
    vue单页面的启动页面是index.html,路由的路径实际是不存在的，所以会出现刷新页面404的问题，需要设置所有找不到的路径直接映射到index.html
    1 刷新页面404 配置启动文件的index页面的路径root:
    D:/workPlace/mex-adx-web/mex-adx-web/dist 2 二级页面刷新报错：
    打包的项目静态 vue项目(vue-cli2,vue-cli3)打包后出现空白解决方案_厚... 4-17
    vue-cli3: ** 在根目录下创建vue.config.js文件,在文件里面加入以下代码
    module.exports={assetsDir:'static',parallel:false,publicPath:'./',}
    到了这步本来就可以了,但是有的还是没有显示出来,那是因为你的路由模式的关系,你把...
    vue cli3 在build 打包完成,访问的时候空白页,路径错误... 3-18 在使用cli3
    开发的过程中,不会出现空白页的问题,因为都是访问的localhost。但是项目完成以后,打包上线,访问的时候出现空白页。
    解决方案如下: 在src文件夹同级目录下创建vue.config.js文件
    Vue下路由History模式打包后页面空白的解决方法 08-27
    主要介绍了Vue下路由History模式打包后页面空白，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    vue打包之后出现空白页的原因以及解决方式 温情 3852 路由模式 history
    新建项目什么都不动，路由模式：history, 直接npm run build打包
    打包之后，直接打开dist文件里面的ndex.html可以看到页面是空白的，控制台是这样的。
    再看看网页源码,
    对比dist文件夹结构可以看到资源路径的引入是错误的，应该用'./'而不是'/'
    那怎么修改打包之后的路径呢？查看vue-cli官网配置参考中的publicPath
    我们只需要在和package.json同级的地方新增一个vue.config.js文
    vue3实战-如何解决vue3项目打包发布到服务器后访问页面显示空白问题
    0月影星云0的博客 1125 1、处理vue.config.js文件中的publicPath，处理如下：
    const { defineConfig } = require('@vue/cli-service') module.exports =
    defineConfig({ publicPath: process.env.NODE_ENV === 'production' ? './' :
    '/', outputDir: 'dist', indexPath: 'index.html', lintOnSave: false,
    解决vue3打包过后空白页面 小菜鸟的博客 934 解决vue3打包过后空白页面
    在项目根目录下，新建一个vue.config.js文件 module.exports = { // 基本路径
    publicPath: './', // 输出文件目录 outputDir: 'dist', configureWebpack: {
    externals: { } } } 如果还是不可以，那么需要找到如下页面： ...
    vue项目打包后放到服务器上是空白页面,vue项目打包后打开页面空白解决办法
    weixin_35562751的博客 1073
    网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。assetsPublicPath默认的是
    ‘/' 也就是根目... Vue-cli3打包出现空白解决方案 qq_41606029的博客 1273
    全局安装http-server D:\项目\zhtblog\dist>npm install http-server -g
    进入dist文件夹，打开cmd，输入http-server,打开对应网址，问题解决
    vue-cli3项目中，配置vue.config.js解决打包以后页面空白问题 Gabriel_wei的博客
    3625 问题说明 项目用的是vue-cli3,我是在npm run
    build以后，打开打包好的文件，结果页面空白，打开console控制台，结果是文件的路径引入错误。
    解决 根目录下新建vue-config-js 我们简单一些，不写其他配置项 module.exports =
    { publicPath: "./" }; 修改route配置 吧mode:
    "history",注释掉，这样，默认就... 为什么Vue打包出来的项目是空白页面？
    Alanrnzearn的博客 1056
    有时候稍微没注意，用Vue打包出来的项目经过本地直接打开时发现竟然是空白页面！
    1.
    最直接的原因就是在打包项目的时候忘记创建vue.config.js文件了，这个时候在原Vue项目底下新建vue.config.js文件，内容为：
    module.exports = { publicPath:'/', out
    vue项目打包后放到服务器上是空白页面,vue 项目打包空白
    vue项目打包后打开页面空白解决办法... weixin_39833469的博客 187
    网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。module.exports
    = {build: {env:... vue-cli3项目打包后页面空白（vue-cli3版本）
    qq_37021104的博客 1624
    首先，如果想要打包后，直接打开index.html页面查看效果，就只需要修改vue.config.js文件，找不到这个文件怎么办呢？去项目的根目录，自己新建一个vue.config.js文件，与package.json同级。创建后输入以下代码：
    module.exports = { publicPath:'./' }
    重新打包，就可以直接点击index.html查看效果了。 如果想要把项...
    vue打包后打开页面是空白的问题 Z15837104340的博客 822 1、npm run
    build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器，但最近发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。
    原因：找到config文件下index.js，全局搜索assetsPublicPath，结果是assetsPublicPath：'
    / '
    默认为根目录，而index.html和static是在同一级目录下，因此，解决方法就是assetsPublicPath：'
    ./ ' 斜杠前加一个点.. vue-cli 3.0 项目打包后本地打开index.html页面空白
    Wen_Luo的博客 522
    使用vuecli3脚手架构建项目，本地运行时是没有问题的，但是在打包之后，页面就一片空白，打开控制台会看到是各种资源引用出错。
    解决办法 1.在项目根目录新建vue.config.js 配置文件 module.exports = {
    publicPath:'./' } 2.路由使用history 模式 改成hash模式 ...
    vue-cli3项目，浏览器运行正常，打包后页面空白报错，解决方案 面对疾风吧 7496
    vue-cli3创建的项目，打包后页面空白报错解决
    萌新专用，直接复制过去就ok，直接上代码
    在你的项目里新建一个文件：vue.congif.js
    ，是src的同级目录下创建，不是src里面创建文件哦！
    然后复制这段代码过去就OK了，直接打包运行就行了。我都帮你配置好了。如果要上线的话，你记得改改路径，路径名称要加上你的服务器的，当然如果只是打包后不放在服务器上，直接打包运行就ok。
    就像下... Vue项目打包后打开空白解决办法 weixin_44090040的博客 3931 前言
    问题描述：Vue项目打包后，打开index.html出现空白页面 一、出错分析？
    这个主要原因是路径的问题。 二、解决方法
    1.修改config下的index.js中bulid模块导出的路径
    config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。
    assetsPublicPath默认的是 ‘/’
    也就是根目录。而我们的index.html和static在同一级目录下
    Vue3打包后空白(静态文件路径错误) 最新发布 qq_42780885的博客 410 命令: ​​npm
    run build 默认打包下 静态文件 路径均出现错误 无法显示页面 在vue.config.js
    下添加 打包路径 即可 module.exports = {
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
</script>
<style lang="less" scoped></style>
